import { AfterViewInit,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  Output,
  SimpleChanges,
  ViewChild,
  ViewEncapsulation} from '@angular/core';

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { CustomReactComponent } from './react-demo';

const containerElementName = 'customReactComponentContainer';



@Component({
  selector: 'app-demo',
  // templateUrl: './demo.component.html',
  template: `<span #${containerElementName}></span>`,
    // styleUrls: [''],
    encapsulation: ViewEncapsulation.None,

  styleUrls: ['./demo.component.less']
})
export class DemoComponent {


  @ViewChild(containerElementName, { static: true }) containerRef!: ElementRef;

  @Input() public counter = 10;
  @Output() public componentClick = new EventEmitter<void>();


  constructor() {
    this.handleDivClicked = this.handleDivClicked.bind(this);
}

public handleDivClicked() {
    if (this.componentClick) {
        this.componentClick.emit();
        this.render();
    }
}

ngOnChanges(changes: SimpleChanges): void {
    this.render();
}

ngAfterViewInit() {
    this.render();
}

ngOnDestroy() {
    ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
}

private render() {
    const { counter } = this;

    //@ts-ignore
    // const root = ReactDOM.createRoot(this.containerRef.nativeElement);

    // root.render(<React.StrictMode>
    //     <div>
    //         <CustomReactComponent counter={counter} onClick={this.handleDivClicked} />
    //     </div>
    // </React.StrictMode>);


    ReactDOM.render(
        <React.StrictMode>
            <div style={ {height:500 } }>
                <CustomReactComponent counter={counter} onClick={this.handleDivClicked} />
            </div>
        </React.StrictMode>
        , this.containerRef.nativeElement);
}

}
